<template>
	<view>
		<view class="dis-title">
			<text class="tag">#</text>
			<text class="title">{{ discussInfo.title }}</text>
		</view>
		<view class="discussInfo">
			<view class="count">
				<text>{{ discussInfo.post_num }} 篇内容</text>
				<text>{{ discussInfo.see_num }} 次浏览</text>
				<navigator style="display: inline-block; margin-left: 20rpx"
					:url="'/pages/topic/index?topic_id=' + topicInfo.id" hover-class="none">
					来源于【
					<text style="color: #616161; font-weight: bold">{{ topicInfo.name }}</text>
					】圈子
				</navigator>
			</view>
			<view class="discuss-desc">{{ discussInfo.introduction }}</view>
		</view>
		<q-post-list :list="postList" :loadStatus="loadStatus"></q-post-list>
		<!-- 发布帖子按钮 -->
		<view v-if="topicInfo.id" @click="handelAdd('/pages/post/add')" class="plus-btn">
			<u-icon name="plus" color="#fff"></u-icon>
			<text class="text">发布动态</text>
		</view>
		<!-- 加入圈子弹窗 -->
		<u-modal :show="joinTopicModel" :show-cancel-button="true" @cancel="joinTopicModel = false" confirm-text="加入圈子"
			:content="'是否加入【' + topicInfo.name + '】?'" @confirm="joinTopic"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				discussId: '',
				loadStatus: 'loading',
				postList: [],
				discussInfo: {},
				page: 1,
				topicInfo: {},
				joinTopicModel: false
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
		onLoad(options) {
			this.discussId = options.id;
			this.getDiscussInfo();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.discussInfo.title,
				path: '/pages/discuss/detail?title=' + this.discussInfo.title
			};
		},
		onShareTimeline() {
			let imgURL = '';
			return {
				title: this.discussInfo.title,
				imageUrl: imgURL,
				query: 'title=' + this.discussInfo.title
			};
		},
		methods: {
			joinTopic() {
				this.$H
					.post('topic/joinTopic', {
						id: this.topicId
					})
					.then((res) => {
						if (res.code == 200) {
							this.topicInfo.is_join = true;
							this.joinTopicModel = false;
						}
					});
			},
			getTopicInfo(topic_id) {
				this.$H
					.get('topic/detail', {
						id: topic_id
					})
					.then((res) => {
						if (res.code == 200) {
							this.topicInfo = res.result;
						}
					});
			},
			handelAdd(url) {
				if (this.userInfo.id) {
					if (this.topicInfo.is_join) {
						let params = {
							topic_id: this.topicId,
							class_id: this.topicInfo.class_id,
							dis_id: this.discussInfo.id
						}

						uni.navigateTo({
							url: url + uni.$u.queryParams(params)
						});
					} else {
						this.joinTopicModel = true;
					}
				} else {
					this.$store.dispatch('mnpLogin');
				}
			},
			getDiscussInfo() {
				this.$H
					.get('discuss/infoById', {
						id: this.discussId
					})
					.then((res) => {
						this.discussInfo = res.result;
						this.getTopicInfo(res.result.topic_id);
						this.getPostList();
					});
			},
			getPostList() {
				this.loadStatus = 'loading';
				this.$H
					.post('post/getListByPage', {
						discuss_id: this.discussId,
						page: this.page
					})
					.then((res) => {
						this.postList = this.postList.concat(res.result.list);

						if (res.current_page === res.last_page || res.last_page === 0) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loadmore';
						}
					});
			}
		}
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.dis-title {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 30rpx 30rpx 0 30rpx;
		line-height: 1;

		.tag {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: 45rpx;
			height: 45rpx;
			border-radius: 50%;
			background-color: #000;
			color: #fff;
			font-weight: bold;
			margin-right: 10rpx;
			font-size: 24rpx;
		}

		.title {
			font-weight: bold;
			color: #000000;
			font-size: 38rpx;
		}
	}

	.discussInfo {
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		align-items: center;
	}

	.avatar {
		margin-right: 10rpx;
	}

	.count {
		font-size: 12px;
		color: #999;
		margin-bottom: 10rpx;
	}

	.count text {
		margin: 0 10rpx;
	}

	.discuss-desc {
		color: #616161;
	}

	.handle-close {
		display: flex;
		justify-content: center;
		margin-bottom: 50rpx;
	}

	.plus-btn {
		position: fixed;
		bottom: 50rpx;
		background-color: $themes-color;
		display: flex;
		align-self: center;
		justify-content: center;
		border-radius: 100rpx;
		line-height: 1;
		padding: 20rpx 40rpx;
		margin-left: 38%;
		font-size: 28rpx;
		color: #fff;

		.text {
			margin-left: 10rpx;
		}
	}
</style>